<template>
    <div>
        <div id="allData"></div>
    </div>
</template>

<script lang="ts">
import { Chart } from '@antv/g2';
import { defineComponent, onMounted, onUpdated } from 'vue';
export default defineComponent({
    props: {
        data: Array
    },
    setup(props) {
        onUpdated(() => {
            const chart = new Chart({
                container: 'allData',
                autoFit: true,
                height: 270,
            });

            chart.data(props.data);

            chart.scale('value', { nice: true, });

            chart.legend({
                position: 'top'
            });

            chart.tooltip({
                showMarkers: false,
            });

            chart
                .interval()
                .position('type*value').color('company')
                .adjust([{
                    type: 'dodge',
                    marginRatio: 0
                }]);

            chart.interaction('element-list-highlight');

            chart.render();

        })
    }

})
    
</script>

<style scoped>

</style>